<template>
    <div class="customLabel knowledge-container">
        <div class="treeContent">
            <div class="header">
                <span>标签类目</span>
                <el-link type="primary" :underline="false" @click="importShow = !importShow">导入</el-link>
            </div>
            <knowledgeTree @getClassId="getClassId" :optionList.sync="optionList" type="label" ref="labelTree"></knowledgeTree>
        </div>
        <div class="container calcwidth">
            <div class="header flexbetween mb20">
                <el-input placeholder="请输入关键字搜索" v-model="keyword" size="small" style="width: 200px">
                    <span slot="suffix" class="iconfont icon-sousuo" @click="filterList"></span>
                </el-input>
                <div class="iconBtn">
                    <el-tooltip effect="light" content="添加" placement="top" :enterable="false" v-if="menuAuthCodes.includes('M79')">
                        <span class="iconfont icon-tianjia" @click="addLabelDialog"></span>
                    </el-tooltip>
                </div>
            </div>
            <element-table :data="labelList" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                           :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize">
            </element-table>
        </div>

        <el-dialog :title="labelTitle" :visible="labelVisible" width="640px" @close="clearLabel" class="labelDialog">
            <el-form label-width="150px">
                <el-form-item label="请选择分类:" required>
                    <a-tree-select v-model="labelClassId" style="width: 100%" :tree-data="optionList" allow-clear
                                   tree-node-filter-prop="title" placeholder="请选择分类" :replace-fields="replaceFields"
                                   :dropdown-style="{ maxHeight: '350px', overflow: 'auto' }" treeDefaultExpandAll />
                </el-form-item>
                <el-form-item label="标签名称:" required>
                    <el-input v-model="labelName" placeholder="请输入标签名称" size="small" maxlength="5"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="labelVisible = false" size="small" type="text">取 消</el-button>
                <el-button type="primary" size="small" @click="labelSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 分类导入 -->
        <import id="classImport" :importShow.sync="importShow" :importConfig="importConfig" @importSuccess="importSuccess" />
    </div>
</template>

<script>
import Import from "@/components/Import";
import knowledgeTree from "@/components/knowledgeTree";
import elementTable from "@/components/elementTable";
import { getLabelList, addLabel, editLabel, delLabel } from "@/api/knowledge.js";
export default {
    name: "customLabel",
    data() {
        return {
            treeId: "0",
            data: [
                {
                    id: "0",
                    label: "全部分类",
                    children: [],
                },
            ],
            classList: [],
            optionList: [],
            keyword: "",
            labelType: "add",
            labelVisible: false,
            labelClassId: null,
            labelEditId: "",
            labelName: "",
            labelList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [{
                config: {
                    label: "标签名称",
                    prop: "labelName"
                },
            }, {
                config: {
                    label: "操作",
                },
                render: (h, scope) => {
                    return (
                        <div class="operation">
                            <el-tooltip effect="light" content="编辑" placement="top" enterable={false}
                                v-show={this.menuAuthCodes.includes('M80')}>
                                <span class="iconfont icon-bianjidaan" onClick={() => this.editLabelDialog(scope)}></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除" placement="top" enterable={false}
                                v-show={this.menuAuthCodes.includes('M81')}>
                                <span class="iconfont icon-shanchu" onClick={() => this.delLabel(scope.id)}></span>
                            </el-tooltip>
                        </div>
                    );
                },
            }],
            replaceFields: {
                title: "label",
                value: "id",
                children: 'children',
            },
            importShow: false,
            importConfig: {
                css: {
                    "top": "50%",
                    "left": "50%",
                    "transform": "translate(-50%, -50%)"
                },
                title: "下载分类导入模板，根据模板的格式填写分类内容，填写完成后，一键导入",
                downloadUrl: "/static/download/标签分类导入模板.xlsx",
                importUrl: "/v1/admin/label/importClass",
            },
        }
    },
    created() {
        this.getLabelList();
    },
    methods: {
        getClassId(classId) {
            this.treeId = classId;
            this.labelClassId = classId == "0" ? null : classId;
            this.pageNo = 1;
            this.getLabelList();
        },
        //列表
        getLabelList() {
            if (!this.menuAuthCodes.includes("M78")) {
                return;
            }
            this.tableLoading = true;
            var param = {
                classId: this.treeId,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                keyword: this.keyword
            }
            getLabelList(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var data = resp.data;
                    this.total = data.total;
                    this.labelList = data.fileList;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        filterList() {
            this.pageNo = 1;
            this.getLabelList();
        },
        labelSubmit() {
            if (!this.labelClassId) {
                return this.$antMessage.warning("请选择分类");
            }
            if (this.labelName.trim() == "") {
                return this.$antMessage.warning("请输入标签名称");
            }
            var param = {
                labelName: this.labelName,
                classId: this.labelClassId
            }
            if (this.labelType == "add") {
                addLabel(param).then(resp => {
                    if (resp.status == 0) {
                        this.$antMessage.success("添加成功");
                        this.pageNo = 1;
                        this.getLabelList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            } else {
                param.id = this.labelEditId;
                editLabel(param).then(resp => {
                    if (resp.status == 0) {
                        this.$antMessage.success("编辑成功");
                        this.pageNo = 1;
                        this.getLabelList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }
            this.labelVisible = false;
        },
        delLabel(id) {
            if (!this.menuAuthCodes.includes("M81")) {
                return;
            }
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delLabel({ ids: id }).then((resp) => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.pageNo = 1;
                        this.getLabelList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }).catch();
        },
        addLabelDialog() {
            this.labelType = "add";
            this.labelVisible = true;
        },
        editLabelDialog(data) {
            if (!this.menuAuthCodes.includes("M80")) {
                return;
            }
            this.labelType = "edit";
            this.labelVisible = true;
            this.labelEditId = data.id;
            this.labelClassId = data.classId;
            this.labelName = data.labelName;
        },
        clearLabel() {
            this.labelClassId = this.treeId == "0" ? null : this.treeId;
            this.labelName = "";
            this.labelVisible = false;
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getLabelList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getLabelList();
        },
        importSuccess() {
            this.$refs.labelTree.getClassList();
        }
    },
    computed: {
        labelTitle() {
            return this.labelType == "add" ? "添加标签" : "编辑标签";
        },
        tableHeight() {
            return document.body.clientHeight - 250;
        },
    },
    components: {
        Import,
        knowledgeTree,
        elementTable,
    }
}
</script>

<style lang="scss">
.customLabel {
    height: 100%;
    overflow: hidden;
    .container {
        padding-top: 10px;
        padding-bottom: 0;
    }
    .labelDialog {
        .el-form-item__content {
            width: 400px;
        }
    }
}
</style>